<template>
  <div class="CareerPlan">
    <div class="CareerPlan_boxtop">
      <div class="CareerPlan_top">
        <div class="CareerPlan_top_box">
          <router-link to="/">
            <img
              class="CareerPlan_top_logo"
              src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
              alt
            />
          </router-link>

          <div class="CareerPlan_top_content">生涯规划</div>
        </div>
      </div>
    </div>
    <div class="CareerPlan_bottom">
      <div class="CareerPlan_boxbottom">
        <div class="CareerPlan_bottom_option">
          <router-link to="/">
            <span>首页</span>
          </router-link>
          <span>></span>
          <span>生涯规划</span>
          <span>></span>
          <span>MBTI性格测试</span>
          <span>></span>
          <span>测试结果</span>
        </div>
        <div class="big_box">
            <div class="left_box">
                <div class="text_type">
                    <div class="text_type_box">
                      <div v-for="(item, index) in typeresult" 
                       :class="index == '0' ? 'typeI' : index == '1' ? 'typeS' : index == '2' ? 'typeT' : index == '3' ? 'typeJ' : '' "
                      :key="index"
                      >{{item}}
                      </div>
                        <!-- <div class="yuan1">I</div>
                        <div class="yuan2">S</div>
                        <div class="yuan3">T</div>
                        <div class="yuan4">J</div> -->
                    </div>
                    <div class="position_box">
                        <div class="yourtype">你是{{typeresult}}型</div>
                        <div class="img_box">
                            <img class="img" :src="detailData.headUrl" alt="">
<<<<<<< HEAD
                            <img class="img"  v-if="detailData.headUrl.substring(0,6)=='wxfile'" src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg" alt="">
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
                        </div>
                        <div class="yourname">{{detailData.userName}}</div>
                    </div>
                    <!-- <div class="retext">重新测试</div> -->
                    
                </div>
                <div class="text_content">
                    <div class="content" v-html="Classroom"></div>
                </div>
                <div class="text_option">
                    <div class="text_option_box">
                    <div class="text_optionDel"  @click="change(1)">性格描述</div>
                    <div class="text_optionDel"  @click="change(2)">性格优劣</div>
                    <div class="text_optionDel"  @click="change(3)">职业推荐</div>
                    <div class="text_optionDel"  @click="change(4)">发展建议</div>
                    </div>
                </div>
                <div class="text_result">
                     
                    <div class="text_result_content" v-if="show==1">
                      <div class="gunzibox">
                        <div class="gunzi"></div>
                        <span class="text_resulttosay">性格描述</span>
                    </div>
                        <div class="iteminfo" v-if="show == 1" v-html="Classroom1"></div>
                    </div>
                    <div class="text_result_content" v-if="show==2">
                      <div class="gunzibox">
                        <div class="gunzi"></div>
                        <span class="text_resulttosay">性格优劣</span>
                    </div>
                        <div class="iteminfo" v-if="show == 2" v-html="Classroom2"></div>
                    </div>
                    <div class="text_result_content" v-if="show==3">
                      <div class="gunzibox">
                        <div class="gunzi"></div>
                        <span class="text_resulttosay">职业推荐</span>
                    </div>
                        <div class="iteminfo" v-if="show == 3" v-html="Classroom3"></div>
                    </div>
                    <div class="text_result_content" v-if="show==4">
                      <div class="gunzibox">
                        <div class="gunzi"></div>
                        <span class="text_resulttosay">发展建议</span>
                    </div>
                        <div class="iteminfo" v-if="show == 4" v-html="Classroom4"></div>
                    </div>
                </div>
            </div>
            <!-- <div class="right_box">
                <div class="right_smorebox">
                <div class="top_title">
                    <div class="title_content">测评推荐的专业</div>
                    <div class="line"></div>
                </div>
                <div class="major_box">
                    <div class="major">计算机专业</div>
                    <div class="line_smore"></div>
                </div>
               
                </div>
            </div> -->
        </div>
        
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TextResult",
  data() {
    return {
      typeresult: "",
        show:1,
        detailData: {},
        Classroom:[],
        Classroom1:[],
        Classroom2:[],
        Classroom3:[],
        Classroom4:[]
    };
  },
  methods:{
    getDetailInfo() {
      this.$ajax({
        method: "post",
        url: "/api/careerplanning/CharacterEntityinfo",
        data: this.typeresult,
        success: res => {
          if (res.data) {
            this.detailData = res.data.data;
            let Contents = this.detailData.describes.replace(
              /\n/g,
              "<p><br/><p>"
            );
            this.Classroom = Contents;
            let Contents1 = this.detailData.present.replace(
              /\n/g,
              "<p><br/><p>"
            );
            this.Classroom1 = Contents1;
            let Contents2 = this.detailData.inferiority.replace(
              /\n/g,
              "<p><br/><p>"
            );
            this.Classroom2 = Contents2;
            let Contents3 = this.detailData.recommendation.replace(
              /\n/g,
              "<p><br/><p>"
            );
            this.Classroom3 = Contents3;
            let Contents4 = this.detailData.proposal.replace(
              /\n/g,
              "<p><br/><p>"
            );
            this.Classroom4 = Contents4;
            console.log(this.detailData)
          }
        }
      });
    },
      change(e){
          this.show=e;
      }
  },
  beforeCreate() {
    this.$nextTick(() => {
<<<<<<< HEAD
      // if(this.$route.params.type==undefined){
      //   this.typeresult = "ENTP";
      //   this.getDetailInfo();
      // }else{
      //   console.log(this.$route.params.type)
      // this.typeresult = this.$route.params.type;
      // this.getDetailInfo();
      // }
      console.log(this.$route.params.type)
      this.typeresult = this.$route.params.type;
      this.getDetailInfo();
=======
      if(this.$route.params.type==undefined){
        this.typeresult = "ENTP";
        this.getDetailInfo();
      }else{
        console.log(this.$route.params.type)
      this.typeresult = this.$route.params.type;
      this.getDetailInfo();
      }
      
>>>>>>> 314b442cce11d658746227581b0160373004c345
    });
  },
};
</script>
<style lang="scss" scoped>
.CareerPlan {
     background-color: #f6f6f6;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .CareerPlan_boxtop {
        background-color: #ffffff;
    height: 68.6px;
    .CareerPlan_top {
        margin: 0 auto;
         width: 1200px;
      height: 68.6px;
      .CareerPlan_top_box {
        width: 170.6px;
        height: 68.6px;
        .CareerPlan_top_logo {
          width: 50px;
          padding-top: 12.5px;
          margin-right: 24px;
        }
        .CareerPlan_top_content {
          display: inline;
          font-size: 22px;
          color: #515151;
          float: right;
          line-height: 68.6px;
        }
      }
    }
  }
  .CareerPlan_bottom {
     
    width: 100%;
    background-color: #f6f6f6;
    .CareerPlan_boxbottom {
        
      width: 1200px;
      margin: 0 auto;
      .CareerPlan_bottom_option {
        padding-top: 27px;
        padding-bottom: 20px;
        span {
          color: #757575;
          font-size: 15px;
        }
      }
      .big_box{
          overflow: hidden;
          .left_box{
             
              background-color: #f6f6f6;
              
              margin-bottom: 116px;
              
              .text_type{
                   position: relative;
                  background-color: #ffffff;
                  height: 235px;
                  margin-bottom: 12px;
                  .text_type_box{
                      overflow: hidden;
                      width: 536px;
                      padding-top: 64px;
                      margin: 0 auto;
                      font-size: 17px;
                      display: flex;
                        justify-content: space-between;
                      
                            .typeI {
                              background: #f19147;
                               height: 68px;
                          width: 68px;
                          border-radius: 50%;
                          color: #ffffff;
                          text-align: center;
                          line-height: 68px;
                            }
                            .typeS {
                              background: #f7ce38;
                               height: 68px;
                          width: 68px;
                          border-radius: 50%;
                          color: #ffffff;
                          text-align: center;
                          line-height: 68px;
                            }
                            .typeT {
                              background: #5fad62;
                               height: 68px;
                          width: 68px;
                          border-radius: 50%;
                          color: #ffffff;
                          text-align: center;
                          line-height: 68px;
                            }
                            .typeJ {
                              background: #2e86ff;
                               height: 68px;
                          width: 68px;
                          border-radius: 50%;
                          color: #ffffff;
                          text-align: center;
                          line-height: 68px;
                            }
                      
                     }
                  .position_box{
                      position: absolute;
                      top: 167px;
                      left: 547px;
                      height: 161px;
                      width: 107px;
                      .yourtype{
                          font-size: 18px;
                          color: #414141;
                          text-align: center;
                          margin-bottom: 13px;
                      }
                      .img_box{
                          
                          .img{
                           width: 100px;
                          height: 100px;
                          border-radius: 100%;
                          margin-bottom: 15px;  
                          }
                      }
                      .yourname{
                          text-align: center;
                          font-size: 15px;
                          color: #777777;
                      }
                  }
                  .retext{
                      margin-top: 37px;
                      margin-right: 66.5px;
                       float: right;
                         font-size: 13px;
                        color: #3288ff;
                  }
              }
              .text_content{
                  background-color: #ffffff;
                  padding-bottom: 20px;
                  margin-bottom: 18px;
                  .content{
                    text-indent: 2em;
                      width: 978px;
                      font-size: 14px;
                      color: #757575;
                      margin:  0 auto;
                      padding-top: 106px;
                  }
              }
              .text_option{
                  background-color: #ffffff;
                  height: 72px;
                  margin-bottom: 18px;
                  .text_option_box{
                      margin: 0 auto;
                      width: 785px;
                      padding-top: 31px;
                       display: flex;
                        justify-content: space-between;
                        color: #757575;
                        font-size: 16px;
                    .text_optionDel{
                    

                    }
                  }
              }
              .text_result{
                  background-color: #ffffff;
                  padding-bottom: 30px;
                  
                    .text_result_content{
                        margin-left: 113px;
                        margin-top: 28px;
                        margin-right: 110px;
                        font-size: 14px;
                        color: #818181;
                        .gunzibox {
                        padding-top: 35px;
                        padding-bottom: 20px;
                        
                        .gunzi {
                        margin-right: 13px;
                        display: inline-block;
                        width: 6px;
                        height: 16px;
                        border-radius: 10px;
                        background-color: #2e86ff;
                        }
                        .text_resulttosay {
                        font-size: 14px;
                        color: #414141;
                        }
                    }
                    .iteminfo{
                      text-indent: 2em;
                     word-wrap: break-word;
    word-break: normal;
                    }
                    }
              }
          }
          .right_box{
              width: 240px;
              height: 342px;
              background-color: #ffffff;
              float: right;
             overflow: hidden;
              .right_smorebox{
                   height: 400px;
                    width: 100%;
                    overflow: auto;
                    padding-right:20px;
              .top_title{
                  .title_content{
                      margin-top: 35px;
                      margin-left: 24px;
                      margin-bottom: 13.5px;
                      font-size: 17px;
                      color: #414141;
                  }
                  .line{
                      height: 12px;
                      margin-left: 20px;
                      background-color: #f0f0f0;
                  }
              }
              .major_box{
                  .major{
                      margin-top: 20px;
                      margin-left: 24px;
                      margin-bottom: 20px;
                  }
                  .line_smore{
                      height: 8px;
                      margin-left: 20px;
                      background-color: #f0f0f0;
                  }
              }
              }
          }
      }
    }
  }
}
.router-link-active {
  text-decoration: none;
}
</style>